<template>
  <div>
    <Title></Title>
    <div style="width:1684px;margin:0 auto">
      <div class = "TableTitle clearfix">
        <div class="left CardTitle BlockImage"></div>
        <div class="left CardName">最新NFT</div>
      </div>
      <el-row :gutter="0" style="margin-top:24px;">
        <el-col :span="4">
          <el-card class="box-card" style="">
            <el-image
              style="width: 240px; height: 240px;background:rgba(255,255,255,0.15);border-radius:10px;"
              :src="tableNFT[0]['image']"
              fit="fill">
            </el-image>
            <el-row>
              <el-col :span="8" class="nft blue">NFT类型</el-col>
              <el-col :span="16" class="nft">{{tableNFT[0]["nft_type"]}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="8" class="nft blue">IDENTITY</el-col>
              <el-col :span="16" class="nft">{{tableNFT[0]["NFT id"]}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="8" class="nft blue">TEL HASH</el-col>
              <el-col :span="16" class="nft">{{tableNFT[0]["info"]}}</el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="1" style="height:1px;"></el-col>
        <el-col :span="4">
          <el-card class="box-card" style="">
            <el-image
              style="width: 240px; height: 240px;background:rgba(255,255,255,0.15);border-radius:10px;"
              :src="tableNFT[1]['image']"
              fit="fill">
            </el-image>
            <el-row>
              <el-col :span="8" class="nft blue">NFT类型</el-col>
              <el-col :span="16" class="nft">{{tableNFT[1]["nft_type"]}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="8" class="nft blue">IDENTITY</el-col>
              <el-col :span="16" class="nft">{{tableNFT[1]["NFT id"]}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="8" class="nft blue">TEL HASH</el-col>
              <el-col :span="16" class="nft">{{tableNFT[1]["info"]}}</el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="1" style="height:1px;"></el-col>
        <el-col :span="4">
          <el-card class="box-card" style="">
            <el-image
              style="width: 240px; height: 240px;background:rgba(255,255,255,0.15);border-radius:10px;"
              :src="tableNFT[2]['image']"
              fit="fill">
            </el-image>
            <el-row>
              <el-col :span="8" class="nft blue">NFT类型</el-col>
              <el-col :span="16" class="nft">{{tableNFT[2]["nft_type"]}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="8" class="nft blue">IDENTITY</el-col>
              <el-col :span="16" class="nft">{{tableNFT[2]["NFT id"]}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="8" class="nft blue">TEL HASH</el-col>
              <el-col :span="16" class="nft">{{tableNFT[2]["info"]}}</el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="1" style="height:1px;"></el-col>
        <el-col :span="4">
          <el-card class="box-card" style="">
            <el-image
              style="width: 240px; height: 240px;background:rgba(255,255,255,0.15);border-radius:10px;"
              :src="tableNFT[3]['image']"
              fit="fill">
            </el-image>
            <el-row>
              <el-col :span="8" class="nft blue">NFT类型</el-col>
              <el-col :span="16" class="nft">{{tableNFT[3]["nft_type"]}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="8" class="nft blue">IDENTITY</el-col>
              <el-col :span="16" class="nft">{{tableNFT[3]["NFT id"]}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="8" class="nft blue">TEL HASH</el-col>
              <el-col :span="16" class="nft">{{tableNFT[3]["info"]}}</el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="1" style="height:1px;"></el-col>
        <el-col :span="4">
          <el-card class="box-card" style="">
            <el-image
              style="width: 240px; height: 240px;background:rgba(255,255,255,0.15);border-radius:10px;"
              :src="tableNFT[4]['image']"
              fit="fill">
            </el-image>
            <el-row>
              <el-col :span="8" class="nft blue">NFT类型</el-col>
              <el-col :span="16" class="nft">{{tableNFT[4]["nft_type"]}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="8" class="nft blue">IDENTITY</el-col>
              <el-col :span="16" class="nft">{{tableNFT[4]["NFT id"]}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="8" class="nft blue">TEL HASH</el-col>
              <el-col :span="16" class="nft">{{tableNFT[4]["info"]}}</el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="40" style="margin-top:24px;padding-bottom:48px">
        <el-col :span="12">
          <div class = "TableTitle clearfix">
            <div class="left CardTitle BlockImage"></div>
            <div class="left CardName">最新区块</div>
          </div>
          <el-card class="box-card">
            <el-table
              :data="tableBlock"
              class = "tableBody"
              style="width: 100%">
              <el-table-column
                label="区块号"
                width="160">
                <template slot-scope="scope">
                  <el-link type="primary" style="font-size:18px;color:#2A5CEA" :href="'/#/blocks/'+scope.row.number">{{scope.row.number}}</el-link>
                </template>
              </el-table-column>
              <el-table-column
                prop="time"
                label="时间"
                width="240">
              </el-table-column>
              <el-table-column
                prop="extrinsics_count"
                label="事件数"
                width="160">
              </el-table-column>
              <el-table-column
                prop="transaction_count"
                label="交易数"
                width="120">
              </el-table-column>
              <el-table-column
                label="详情"
                width="80">
                <template slot-scope="scope">
                  <el-button
                    @click="OnClickBlockDetail(scope.$index)"
                    type="primary" round
                    size="small"
                    style="background-color:#2A5CEA;border: none">
                    详情
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="12">
          <div class = "TableTitle clearfix">
            <div class="left CardTitle TransactionImage"></div>
            <div class="left CardName">最新交易</div>
          </div>
          <el-card class="box-card" style="">
            <el-table
              :data="tableTransaction"
              style="width: 100%">
              <el-table-column
                label="转账者"
                width="260">
                <template slot-scope="scope">
                <router-link :to = '"/address/"+scope.row.from' class="AddressLabel">{{scope.row.from}}</router-link>
              </template>
              </el-table-column>
              <el-table-column
                label="接收者"
                width="260">
                <template slot-scope="scope">
                  <router-link :to = '"/address/"+scope.row.to' class="AddressLabel">{{scope.row.to}}</router-link>
                </template>
              </el-table-column>
              <el-table-column
                label="数量"
                width="160">
                <template slot-scope="scope">
                  <div>{{scope.row.amount}}</div>
                </template>
              </el-table-column>
              <el-table-column
                label="详情"
                width="80">
                <template slot-scope="scope">
                  <el-button
                    @click="OnClickTransactionDetail(scope.$index)"
                    type="primary" round
                    size="small"
                    style="background-color:#2A5CEA;border: none">
                    详情
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
/* eslint-disable */

import axios from 'axios'
import qs from 'qs'
import Title from "./title.vue"
export default {
  name: 'Main',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      timer: null,
      tableBlock: [
      ],
      tableTransaction: [{
        "from":"1qR8w3wBKFPirhWRtbVvi3fKwKetufxaU6EZGkaKaGEFZ3T",
        "to":"1qR8w3wBKFPirhWRtbVvi3fKwKetufxaU6EZGkaKaGEFZ3T",
        "amount":"123.5 DOT"
      }],
      tableNFT:[
      ]
    }
  },
  components:{
    Title
  }, mounted: function () {
    var self = this
    var timer_count = 0
    this.FlushBlockInfo()
    this.FlushTransactionInfo()
    this.timer = setInterval(() => {
      timer_count++
      self.FlushNftInfo()
      self.FlushTransactionInfo()
      self.FlushBlockInfo()
    }, 2000);
  }, destroyed: function () {
    console.log("destroyed")
    clearInterval(this.timer)
  },
  methods: {
    IntTo0X(v){
      var rtn = v.toString(16)
      var len_size = 8-rtn.length
      console.log(rtn.length)
      console.log(len_size)
      for(var i = 0; i < len_size; i++){
        rtn = "0" + rtn
      }
      console.log("0x"+rtn)
      return "0x"+rtn;
    },
    FlushNftInfo(){
      var self = this
      axios.get(`/api/get_latest_nft/1`).then(function(data){
        var response = data.data.data;
        console.log(response)
        self.tableNFT = []
        for(var i = 0; i < response.length; i++){
          self.tableNFT.push({
            "nft_type": response[i].symbol,
            "NFT id": self.IntTo0X(response[i].id),
            "action": "创建",
            "info": response[i].uri.tel,
            "image": "https://app.weiliankuai.com/rest_static/sign/"+response[i].uri.sign,
          })
        }
        
      })
    },
    FlushBlockInfo(){
      var self = this
      axios.get("/api/get_newest_block_info").then(function(data){
        self.tableBlock = data.data
      })
    },
    FlushTransactionInfo() {
      var self = this
      axios.get("/api/get_newest_transaction_info").then(function(data){
        for(var i = 0; i < data.data.length; i++){
          data.data[i].amount = (data.data[i].amount/10000000000).toFixed(2)+' DOT'
        }
        self.tableTransaction = data.data
      })
    },
    OnClickBlockDetail(index) {
      this.$router.push('/blocks/'+this.tableBlock[index].number);
    },
    OnClickTransactionDetail(index) {
      this.$router.push('/exterinsics/'+this.tableTransaction[index].hash);
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../style/self.scss"; 

.box-card{
  background:#262A34;
  border-radius:32px;
  border: 0px;
  margin-top: 28px;
}
.AddressLabel{
  text-decoration:none;
  color:#2A5CEA;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.TableTitle{
  width: 141px;
  margin: 0 auto;
  margin-top:24px;
}
.CardTitle{
  width: 27px;
  height: 24px;
  background-size: 27px 24px;
}

.BlockImage{
  background-image:url(/static/new_block.png);
}

.TransactionImage{
  background-image:url(/static/new_transaction.png);
}

.CardName{
  font-size: 24px;
  line-height: 24px;
  margin-left: 16px;
  color: #ffffff;
}


.box-card >>> .el-table--fit {
  background-color: #262A34 !important;
}
.box-card >>> .el-table,
.el-table__expanded-cell {
  background-color: #ff0000;
  border: none;
}
.box-card >>> .el-table th {
  background-color: transparent !important;
  border-bottom: 1px solid #313131;
  color: #ffffff;
  font-size:18px;
  
}
.box-card >>> .el-table tr {
  background-color: transparent !important;
  border: none;
}
.box-card >>> .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
  color: #ffffff;
  border: none;
  font-size:18px;
}

.el-table::before {
  height: 0px;
}

.nft{
  color: #ffffff;
  border: none;
  font-size:14px;
  text-align: left;
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap;
  margin-top:8px;
  line-height: 24px;
}  
.blue{
  color:#2A5CEA;
}
</style>